/**
 * Created by antelop on 2015/6/12.
 */
(function (window, $, namespace) {
    /**
     * Usage:
     *
     * HTML:
     * <div id="[ID]" class="mui-popover">
     *  <div class="mui-scroll-wrapper">
     *      <div class="mui-scroll">
     *          [CONTENT]
     *      </div>
     *  <div>
     * </div>
     */

    /**
     * 定义弹出框控件
     */
    $.DeclareClass("XspWeb.Controls.MobileUI.Popup", XspWeb.Controls.MobileUI.Control, {
        Static: {
            /**
             * 创建弹出框控件
             *
             * @param Object parent 父控件
             * @param String id 控件索引
             * @returns XspWeb.Controls.MobileUI.Popup 弹出框控件对象
             */
            Create: function (parent, id) {
                var div = document.createElement("div");
                div.id = id;
                div.className = "mui-popover";

                var wrapper = document.createElement("div");
                wrapper.className = "mui-scroll-wrapper";

                var scroll = document.createElement("div");
                scroll.className = "mui-scroll";
                wrapper.appendChild(scroll);

                div.appendChild(wrapper);

                if (parent)
                    parent.appendChild(div);

                return new XspWeb.Controls.MobileUI.Popup(div);
            }
        },

        /**
         * 构造函数
         *
         * @param VAR control 控件索引或DOM节点对象
         */
        Constructor: function (control) {
            this.Super(control);

            /**
             * 是否显示在屏幕正中间
             */
            this.mIsCentered = true;

            /**
             * 添加目标元素
             */
            this.mContentTarget = this.mControl.querySelector(".mui-scroll");

            /**
             * 控件宽度
             */
            this.mControl.style.height = "65%";

            /**
             * 控件高度
             */
            this.mControl.style.width = "85%";

            // 绑定滚动事件
            $.fn.scroll.call($.wrap([this.mControl.querySelector(".mui-scroll-wrapper")]));
        },

        /**
         * 设置是否显示屏幕正中间
         *
         * @param Boolean isCentered
         */
        SetIsCentered: function (isCentered) {
            this.mIsCentered = isCentered;
        },

        /**
         * 设置控件宽度
         *
         * @param Double width
         */
        SetWidth: function (width) {
            this.mControl.style.width = width;
        },

        /**
         * 设置控件高度
         *
         * @param Double height
         */
        SetHeight: function (height) {
            this.mControl.style.height = height;
        },

        /**
         * 添加弹出框内容
         *
         * @param VAR target 控件索引或DOM节点对象
         */
        Add: function (target) {
            target = (typeof(target) === "string") ? $("#" + target)[0] : target;
            this.mContentTarget.appendChild(target);
        },

        /**
         * 显示弹出框
         */
        Show: function () {
            $(this.mControl).popover("show");
            this.Shown();
        },

        /**
         * 显示弹出框后置处理函数 目前进行控件居中处理
         */
        Shown: function () {
            if (this.mIsCentered) {
                var top = ((window.innerHeight - this.mControl.offsetHeight) / 2) + document.body.scrollTop;
                var left = ((window.innerWidth - this.mControl.offsetWidth) / 2) + document.body.scrollLeft;
                // 设置弹出框的位置为页面正中间
                this.mControl.style.top = top + "px";
                this.mControl.style.left = left + "px";
            }
        },

        /**
         * 隐藏控件
         */
        Hide: function () {
            $(this.mControl).popover("hide");
        },

        /**
         * 清空弹出框控件内容
         */
        Clear: function () {
            if (this.mContentTarget)
                this.mContentTarget.innerHTML = "";
        }
    });
})(window, jQuery, jQuery.Namespace());